<template>
	<view class="container">
		<view>请输入导入文本：</view>
		<textarea v-model="token" maxlength="-1"></textarea>
		<button class="import" @click="read">导入</button>

		<!--确认导入对话框-->
		<u-modal :show="showConfirm"
				 @close="showConfirm = false"
				 @cancel="showConfirm = false"
				 @confirm="confirm"
				 buttonReverse
				 closeOnClickOverlay showCancelButton>
			<view>
				<view>数据条数：{{passwordList.length}}</view>
				<view>导出时间：{{exportTime}}</view>
				导入将会覆盖现有数据，确定导入吗
			</view>
		</u-modal>

		<u-notify ref="notify"/>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 导入的数据
			token: null,
			// 要导入的密码
			passwordList: [],
			// 显示确认导入对话框
			showConfirm: false,
			// 导出时间
			exportTime: null,
			// 序列
			sequence: null
		};
	},
	methods: {
		/**
		 * 导入数据
		 */
		read() {
			if (!this.token || this.token === '') {
				this.$refs.notify.warning('请输入导入文本');
				return;
			}
			// 解析数据
			try {
				console.log(this.token);
				let {passwordList, exportTime, sequence} = this.jwt.parseToken(this.token.trim());
				this.passwordList = passwordList;
				this.exportTime = exportTime;
				this.sequence = sequence;
				console.log(exportTime);
				console.log(this.passwordList);
				this.showConfirm = true;
			} catch(e) {
				console.error(e);
				this.$refs.notify.warning('数据解析失败');
			}
		},

		/**
		 * 确定导入
		 */
		confirm() {
			// 导入数据
			this.passwordService.importAll(this.passwordList);
			// 导入序列
			uni.setStorageSync('sequence', this.sequence);
			this.showConfirm = false;
			this.token = null;
			uni.navigateBack();
			uni.$emit('settingSuccess', '导入成功');
		}
	}
}
</script>
<style scoped>
.container {
	padding: 10px;
}
/*导入文本*/
textarea {
	border: 1px solid grey;
	width: 100%;
	margin: 15px 0;
	border-radius: 10px;
	padding: 10px;
	box-sizing: border-box;
}
.import {
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background-color: #409EFF;
	color: white;
	margin: 15px 0;
}
.scroll {
	max-height: 400px;
}
</style>
